﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现的通用横向焦点图片轮换</title>

<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:400px;height:267px; margin:0 auto;}
.indexFocus .focusBox{width:400px;height:267px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:400px;height:267px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:400px;height:267px}
.indexFocus .focusBox .bigPic img{width:400px;height:267px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{
	width: 15px;
	height: 15px;
	background: #B90101;
	color: #fff
}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
img {
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 0px;
	margin: 0px;
	border-right-width: 0px;
	padding: 0px;
}
a{
	text-decoration: none;
}
</style>

</head>
<body >
<div class="indexFocus">
 <div id="movePic1" class="focusBox">     
   <div class="bigPic" id="oPic">
   <ul>
    <li><a href="#"><img src="images/01.jpg" alt="丹巴藏寨" /></a></li>
    <li><a href="#"><img src="images/02.jpg" alt="拉萨郊外" /></a></li>
    <li><a href="#"><img src="images/03.jpg" alt="圣湖传说" /></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="最美的草原-巴音布鲁克" /></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="最美丽的雪山" /></a></li>
   </ul>     
   </div>     
   <div class="btn" id="oBtn">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>      
   </ul>
   </div>     
   <div class="picText" id="oText">
    <li><a href="" target="_blank">丹巴藏寨</a></li>
    <li><a href="" target="_blank">拉萨郊外</a></li>
    <li><a href="" target="_blank">圣湖传说</a></li>
    <li><a href="" target="_blank">最美的草原-巴音布鲁克</a></li>
    <li><a href="" target="_blank">最美丽的雪山</a></li>      
   </div>  
   <div class="picText_bg"></div>   
  </div>
</div>
<script language="javascript">
function mainfun(mainObj,t){
  function getID(id){return document.getElementById(id)}
  function getTag(tag,obj){
   return (typeof obj=='object'?obj:getID(obj)).getElementsByTagName(tag); }
  var cut = 0;
  var timer='';
  var num = getTag('li',getTag('div',getID(mainObj))[0]).length;		
  var getpic = getTag('li',getTag('div',getID(mainObj))[0]);
  var getbtn = getTag('li',getTag('div',getID(mainObj))[1]);
  var gettext = getTag('li',getTag('div',getID(mainObj))[2]); 
  for(i=0;i<num;i++){
	getpic[i].style.display="none";
	gettext[i].style.display="none";
	getbtn[i].onclick=(function(i){
	  return function(){ 
		 getbtn[i].className="sel";
		 changePic(i);}
		 })(i);
  }			 
  getpic[cut].style.display="block";
  getbtn[cut].className="sel";
  gettext[cut].style.display="block";
  getID(mainObj).onmouseover=function(){
	 clearInterval(timer);}
  getID(mainObj).onmouseout=function(){
	 timer = setInterval(autoPlay,t);}
   
  function changePic(ocut){
	for(i=0;i<num;i++){
	   cut=ocut;
	   getpic[i].style.display="none";
	   getbtn[i].className=""			
	   gettext[i].style.display="none";
	 }
	 getpic[cut].style.display="block";
	 getbtn[cut].className="sel";
	 gettext[cut].style.display="block"				   
   }
   
  function autoPlay(){
	 if(cut>=num-1){cut=0 ;}
	 else{cut++ ;}
	 changePic(cut);
	}
  timer = setInterval(autoPlay,t);
}	
mainfun("movePic1",2000);
</script>   
</body>
</html>
